<template>
  <div>
    <rich-text-editor class="rich-text-editor"
    ref="RTF" @store="autoUpdateDraft"></rich-text-editor>
    
    <article-infos-choice class="article-infos-choice" ref="AIC"></article-infos-choice>

    <div class="clear-draft" @click="clear">
      <i class="iconfont icon-clear" title="清空所有内容"></i>
    </div>
  </div>
</template>

<script>
import {assertLogin} from '@/utils/assert.js';

import RichTextEditor from '@c/utils/RTF/RichTextEditor.vue';
import ArticleInfosChoice from './article/ArticleInfosChoice.vue';

  export default {
    components: {
      RichTextEditor,
      ArticleInfosChoice,
    },
    data() {
      return {
        draft: null
      }
    },
    computed: {
      draftId() {
        let id = parseInt(this.$route.query.draftId);
        if(isNaN(id)) id = undefined;
        return id;
      }
    },
    watch: {
      $route: {
        handler(nv, ov) {
          if(nv.path === '/publish/article') {
            assertLogin().then(flag => {
              if(flag) {
                this.fillDraft()
              } else {
                window.open('/', '_self');
              }
            });
          };
        },
        immediate: true
      }
    },
    methods: {
      pubArticle(infos) {
        return this.$refs.RTF.getArticle().then((article) => {
          console.log(article.content);
          let payload = {
            ...article,
            ...infos
          };
          if(!infos.digest) {
            payload.digest = article.text.slice(0, 100);
            payload.text = undefined;
          }
          // return this.$post({
          //   name: 'pub article',
          //   url: 'article/content/submit',
          //   data: payload
          // });
          return new Promise((resolve, reject) => {
            resolve({
              res: {
                data: {
                  success: true
                }
              }
            })
          })
        });
      },
      storeArticle(infos) {
        return this.$refs.RTF.getRawArticle().then((article) => {
          let payload = {
            ...article,
            ...infos
          };
          if(!infos.digest) {
            payload.digest = article.text.slice(0, 100);
            payload.text = undefined;
          }
          return this.$post({
            name: 'store article',
            url: 'article/content/draft/store',
            data: payload
          })
        })
      },
      updateArticleDraft(infos) {
        return this.$refs.RTF.getRawArticle().then((article) => {
          let payload = {
            ...article,
            ...infos
          };
          return this.$post({
            name: 'update article draft',
            url: 'article/content/draft/update',
            data: payload
          })
        })
      },
      autoUpdateDraft() {
        this.$refs.AIC.autoStoreArticle();
      },
      fillDraft() {
        if(this.draftId === undefined) {
          return;
        }
        else {
          this.$fetch({
            name: 'article draft',
            url: 'creator/article/draft',
            method: 'POST',
            data: {
              id: this.draftId
            }
          }).then(res => {
            if(res.data.success) {
              this.draft = res.data.object;
              this.draft.tag = this.draft.tagList.map(item => item.name);
              this.draft.type = this.draft.typeList.map(item => item.name);
              this.$refs.RTF.fillDraft(this.draft);
              this.$refs.AIC.fillDraft(this.draft);
            } else {
              this.$alert({
                type: 'error',
                content: '获取草稿失败'
              })
            }
          }).catch(error => {
            this.$alert({
              type: 'error',
              content: '获取草稿失败'
            })
          })
        }
      },
      clear() {
        this.$confirm("清空所有内容？", flag => {
          if(flag) {
            this.$refs.RTF.clear();
            this.$refs.AIC.clear();
          }
        })
      },
    },
  }
</script>

<style lang="less" scoped>
@iw: 900px;

.rich-text-editor {
  --richTextEditorWidth: @iw;
  margin-top: var(--topNavHeight);
}

.article-infos-choice {
  --articleInfosChoiceWidth: @iw;
  margin: 20px auto;
}

.clear-draft {
  --a: 3.5vw;
  position: fixed;
  right: 5vw;
  top: calc(3 * var(--topNavHeight));
  width: var(--a);
  height: var(--a);
  border-radius: 30%;

  &:hover {
    background-color: var(--slightBlue);
    color: var(--darkBlue);
  }

  .iconfont {
    display: block;
    width: var(--a);
    height: var(--a);
    line-height: var(--a);
    text-align: center;
    font-size: calc(var(--a) * 0.5);

    &:hover {
      cursor: pointer;
    }
  }
}
</style>